<template>
  <div class="container">
    <div class="rowOne">
      <div>
        <img :src="result.logo" alt="" width="90px" height="90px" class="circle">
      </div>
      <div>
        <p class="p1">{{b64DecodeUnicode(result.mediaName)}}</p>
        <p class="p2">
          <span>简介：</span>
          <span>{{result.about}}</span>
        </p>
      </div>
      <div>
        <img src="../../assets/img/shortVideoDetail/3.png" alt="">
        <span>参考价格:</span>
        <span>{{price}}</span>
      </div>
      <div>
        <!-- 待定区域 -->
      </div>
      <div>
        <div :style="{background:'url('+item[0]+')'}" v-for="(item,index) in btn" :key="index" @mouseover="change(index)">
          <span :class="{white:index==btnIndex,black:index!=btnIndex}" @click="ctrlorlx(index)">{{item[1]}}</span>
        </div>
      </div>
    </div>
    <div class="rowTwo">
      <!-- 216*5 1080  -->
      <ul class="ul1" v-if="show0">
        <li>
          <p>{{title1}}</p>
          <p>{{content1}}</p>
        </li>
        <li>
          <p>{{title2}}</p>
          <p>{{content2}}</p>
        </li>
        <li>
          <p>{{title3}}</p>
          <p>{{content3}}</p>
        </li>
        <li>
          <p>{{title4}}</p>
          <p>{{content4}}</p>
        </li>
        <li>
          <p>{{title5}}</p>
          <p>{{content5}}</p>
        </li>
      </ul>
      <ul class="ul2" v-if="show1">
        <li>
          <p>{{title1}}</p>
          <p>{{content1}}</p>
        </li>
        <li>
          <p>{{title2}}</p>
          <p>{{content2}}</p>
        </li>
        <li>
          <p>{{title3}}</p>
          <p>{{content3}}</p>
        </li>
        <li>
          <p>{{title4}}</p>
          <p>{{content4}}</p>
        </li>
      </ul>
      <ul class="ul3" v-if="show2">
        <li>
          <p>{{title1}}</p>
          <p>{{content1}}</p>
        </li>
        <li>
          <p>{{title2}}</p>
          <p>{{content2}}</p>
        </li>
        <li>
          <p>{{title3}}</p>
          <p>{{content3}}</p>
        </li>
        <li>
          <p>{{title4}}</p>
          <p>{{content4}}</p>
        </li>
        <li>
          <p>{{title5}}</p>
          <p>{{content5}}</p>
        </li>
        <li>
          <p>{{title6}}</p>
          <p>{{content6}}</p>
        </li>
      </ul>
    </div>
    <div class="rowThree">
      <div class="div1">
        <div class="left">
          <p><img src="../../assets/img/shortVideoDetail/13.png" alt="">
            <span>选择{{b64DecodeUnicode(result.mediaName)}}的人还选择了</span><img src="../../assets/img/shortVideoDetail/14.png" alt=""></p>
          <ul>
            <li v-for="(item,index) in select" :key="index">
              <img :src="item.logo" alt="" width="90px" height="90px">
              <p>{{b64DecodeUnicode(item.mediaName)}}</p>
              <div class="bgAdd">
                <span @click="addctrl(index)">加入收藏夹</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="right">
          <p><img src="../../assets/img/shortVideoDetail/13.png" alt="">
            <span>人气排行榜</span>
            <button class="bgBtn">{{result.type}}</button>
          </p>
          <ul>
            <li v-for="(item,index) in listDetail" :key="index" v-if="index<5">
              <img :src="img[index]" alt="">
              <span>{{b64DecodeUnicode(item.media_name)}}</span>
              <span>{{numLen(item.fans_total + "")}}</span>
              <span>{{label1}}:</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="rowFour" v-if="showApp">
      <p class="apprecta"><img src="../../assets/img/shortVideoDetail/13.png" alt="">
        <span>广告位类型</span>
      </p>
      <ul class="apprect">
        <li v-for="(item,index) in appName" :key="index">
          <span>{{b64DecodeUnicode(result.mediaName)}}APP-{{item}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
const img1 = require("../../assets/img/shortVideoDetail/6.png");
const img2 = require("../../assets/img/shortVideoDetail/5.png");
const img3 = require("../../assets/img/shortVideoDetail/7.png");
const img4 = require("../../assets/img/shortVideoDetail/8.png");
const img5 = require("../../assets/img/shortVideoDetail/18.png");
const img6 = require("../../assets/img/shortVideoDetail/20.png");
const img7 = require("../../assets/img/shortVideoDetail/21.png");
const img8 = require("../../assets/img/shortVideoDetail/22.png");
const img9 = require("../../assets/img/shortVideoDetail/23.png");

export default {
  data() {
    return {
      query: "",
      result: "",
      btn: [[img1, "加入收藏夹", img3], [img2, "联系客服", img4]],
      btnIndex: 999,
      // 根据不同的显示样式判断不同的数据
      // 样式li为5个的时候show0,样式li为4个的时候show1,样式li为6个的时候show2
      title1: "",
      title2: "",
      title3: "",
      title4: "",
      title5: "",
      title6: "",
      content1: "",
      content2: "",
      content3: "",
      content4: "",
      content5: "",
      content6: "",
      show0: "",
      show1: "",
      show2: "",
      select: "",
      listDetail: "",
      img: [img5, img6, img7, img8, img9],
      label1: "" /*热气排行榜的标签。*/,
      // APP特有内容
      showApp: false,
      appName: ""
    };
  },
  methods: {
    change(index) {
      this.btn[0][0] = img1;
      this.btn[1][0] = img2;
      this.btnIndex = index;
      this.btn[index][0] = this.btn[index][2];
    },
    addctrl(index) {
      // 是否登录，加入收藏夹
      if (window.sessionStorage.getItem("userInfo")) {
        this.$ajax
          .post(this.Ipurl + "favoriteInfo/save", {
            userId: JSON.parse(window.sessionStorage.getItem("userInfo"))
              .userId,
            popularMediaId: this.select[index].id,
            type: this.select[index].type
          })
          .then(res => {
            if (res.data.returnCode == 1000) {
              this.$message("添加成功");
            } else if (res.data.returnCode == 2000) {
              this.$message("sorry!已经收藏了");
            } else {
              this.$message.error("添加失败");
            }
          });
      } else {
        this.$confirm("检测到您并没有登录", "warning", {
          confirmButtonText: "立即登录",
          cancelButtonText: "不了，谢谢",
          type: "warning"
        }).then(() => {
          this.$router.push("/login");
        });
      }
    },
    ctrlorlx(index) {
      if (index == 0) {
        if (window.sessionStorage.getItem("userInfo")) {
          this.$ajax
            .post(this.Ipurl + "favoriteInfo/save", {
              userId: JSON.parse(window.sessionStorage.getItem("userInfo"))
                .userId,
              popularMediaId: this.query,
              type: this.result.type
            })
            .then(res => {
              if (res.data.returnCode == 1000) {
                this.$message("添加成功");
              } else if (res.data.returnCode == 2000) {
                this.$message("sorry!已经收藏了");
              } else {
                this.$message.error("添加失败");
              }
            });
        } else {
          this.$confirm("检测到您并没有登录", "warning", {
            confirmButtonText: "立即登录",
            cancelButtonText: "不了，谢谢",
            type: "warning"
          }).then(() => {
            this.$router.push("/login");
          });
        }
      } else if (index == 1) {
        alert("联系客服");
      }
    }
  },
  computed: {
    price() {
      if (this.result.type == "app") {
        return this.result.appPrice;
      } else {
        return this.result.referencePrice + "元起";
      }
    }
  },
  mounted() {
    // 获取ID
    this.query = this.$route.query.id;
    // 发送ID。
    this.$ajax
      .post(this.Ipurl + "popularMedia/queryById" + "?id=" + this.query)
      .then(res => {
        this.result = res.data.dataInfo;
        if (this.result.type == "短视频") {
          this.show0 = true;
          this.label1 = "粉丝数";
          this.title1 = "媒体名称";
          this.title2 = "所属平台";
          this.title3 = "ID";
          this.title4 = "获赞量";
          this.title5 = "粉丝数";
          this.content1 = this.b64DecodeUnicode(this.result.mediaName);
          this.content2 = this.result.platformName;
          this.content3 = this.result.userId;
          this.content4 = this.numLen(this.result.likenumInt + "");
          this.content5 = this.numLen(this.result.fansTotal + "");
        } else if (this.result.type == "小红书号") {
          this.show1 = true;
          this.label1 = "粉丝数";
          this.title1 = "媒体名称";
          this.title2 = "粉丝数";
          this.title3 = "收藏/点赞";
          this.title4 = "笔记数量";
          this.content1 = this.b64DecodeUnicode(this.result.mediaName);
          this.content2 = this.numLen(this.result.fansTotal + "");
          this.content3 = this.numLen(this.result.likenumInt + "");
          this.content4 = this.numLen(this.result.noteTheNumber + "");
        } else if (this.result.type == "网易考拉海购号") {
          this.show1 = true;
          this.label1 = "粉丝数";
          this.title1 = "媒体名称";
          this.title2 = "获赞量";
          this.title3 = "粉丝数";
          this.title4 = "文章数";
          this.content1 = this.b64DecodeUnicode(this.result.mediaName);
          this.content2 = this.numLen(this.result.likenumInt + "");
          this.content3 = this.numLen(this.result.fansTotal + "");
          this.content4 = this.numLen(this.result.articleNum + "");
        } else if (this.result.type == "微信公众号") {
          this.show2 = true;
          this.title1 = "媒体名称";
          this.title2 = "ID";
          this.title3 = "平均阅读量";
          (this.title4 = "粉丝数"), (this.title5 = "平均点赞量");
          this.title6 = "面向地区";
          this.content1 = this.b64DecodeUnicode(this.result.mediaName);
          this.content2 = this.result.userId;
          this.content3 = this.numLen(this.result.readingQuantity + "");
          this.content4 = this.numLen(this.result.fansTotal + "");
          this.content5 = this.numLen(this.result.fansTotal + "");
          this.content6 = this.numLen(this.result.city);
        } else if (this.result.type == "微博大V号") {
          this.show0 = true;
          this.title1 = "媒体名称";
          this.title2 = "粉丝数";
          this.title3 = "平均转发量";
          this.title4 = "平均点赞量";
          this.title5 = "平均评论量";
          this.content1 = this.b64DecodeUnicode(this.result.mediaName);
          this.content2 = this.numLen(this.result.fansTotal + "");
          this.content3 = this.numLen(this.result.amountOfForwarding + "");
          this.content4 = this.numLen(this.result.fansTotal + "");
          this.content5 = this.numLen(this.result.commentTotal + "");
        } else if (this.result.type == "app") {
          this.show0 = true;
          this.showApp = true;
          this.title1 = "媒体名称";
          this.content1 = this.b64DecodeUnicode(this.result.mediaName);
          this.title2 = "媒体领域";
          this.content2 = this.result.mediaSectorStr;
          this.title3 = "月度活跃用户";
          this.content3 = this.numLen(this.result.monthToLive + "");
          this.title4 = "月总有效时长（万小时）";
          this.content4 = this.numLen(this.result.monthEffectiveTime + "");
          this.title5 = "售卖方式";
          this.content5 = this.result.sellingWay;
          this.appName = this.result.advertisingSpaceType.split("、");
        }
        // 回调函数调用选择接口。
        this.$ajax
          .post(this.Ipurl + "popularMedia/getOther", {
            id: this.query,
            type: this.result.type
          })
          .then(res => {
            this.select = res.data.dataInfo;
          });
        this.$ajax
          .post(
            this.Ipurl +
              "popularMedia/getRankingByType" +
              "?type=" +
              this.result.type
          )
          .then(res => {
            this.listDetail = res.data.dataInfo;
          });
      });
  }
};
</script>
<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}
.rowOne {
  width: 100%;
  height: 200px;
  margin-top: 40px;
  background: url("../../assets/img/shortVideoDetail/1.png");
}
.rowOne > div {
  float: left;
}
.rowOne > div:nth-child(2) {
  width: 300px;
}
.rowOne > div:nth-child(3) {
  width: 200px;
  margin-left: 28px;
  text-align: center;
  height: 200px;
  line-height: 200px;
}
.rowOne > div:nth-child(3) > span {
  font-size: 16px;
}
.rowOne > div:nth-child(3) > span:nth-child(2) {
  font-weight: bold;
  margin-left: 5px;
}
.rowOne > div:nth-child(3) > img:nth-child(1) {
  margin-top: -5px;
}
.rowOne > div:nth-child(3) > span:nth-child(3) {
  color: rgb(237, 64, 64);
  margin-left: 5px;
}
.rowOne > div:nth-child(4) {
  width: 200px;
  height: 200px;
  margin-left: 20px;
}
.rowOne > div:nth-child(5) > div {
  width: 130px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  overflow: hidden;
}
.rowOne > div:nth-child(5) > div:nth-child(1) {
  margin-top: 60px;
  cursor: pointer;
}
.rowOne > div:nth-child(5) > div > span {
  margin-left: 20px;
}
.rowOne > div:nth-child(5) > div:nth-child(2) {
  margin-top: 20px;
  cursor: pointer;
}
.white {
  color: #fff;
}
.black {
  color: rgb(34, 34, 34);
}
.circle {
  border-radius: 50%;
  margin-left: 60px;
  margin-top: 55px;
}
.p1 {
  font-size: 18px;
  margin-top: 66px;
  margin-left: 40px;
}
.p2 {
  margin-left: 40px;
  margin-top: 20px;
  font-size: 14px;
}
.p2 > span:nth-child(1) {
  font-weight: bold;
}
.rowTwo {
  margin-top: 20px;
  width: 100%;
  height: 180px;
  background: url("../../assets/img/shortVideoDetail/9.png");
}
.ul1 {
  margin-left: 60px;
}
.ul1 li {
  float: left;
  width: 216px;
  height: 180px;
  text-align: center;
}
.ul1 li > p:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  color: rgb(34, 34, 34);
  margin-top: 55px;
}
.ul1 > li > p:nth-child(2) {
  font-size: 18px;
  color: rgb(34, 34, 34);
  margin-top: 30px;
}
.ul2 {
  margin-left: 60px;
  /* 120 1080 /4 270 */
}
.ul2 li {
  float: left;
  width: 270px;
  height: 180px;
  text-align: center;
}
.ul2 li > p:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  color: rgb(34, 34, 34);
  margin-top: 55px;
}
.ul2 > li > p:nth-child(2) {
  font-size: 18px;
  color: rgb(34, 34, 34);
  margin-top: 30px;
}
.ul3 {
  margin-left: 60px;
  /* 120 1080 /6 180 */
}
.ul3 li {
  float: left;
  width: 180px;
  height: 180px;
  text-align: center;
}
.ul3 li > p:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  color: rgb(34, 34, 34);
  margin-top: 55px;
}
.ul3 > li > p:nth-child(2) {
  font-size: 18px;
  color: rgb(34, 34, 34);
  margin-top: 30px;
}
.rowThree {
  margin-top: 30px;
  overflow: hidden;
}
.div1 > div:nth-child(1) {
  float: left;
  width: 912px;
  height: 340px;
}
.div1 > div:nth-child(1) > p {
  font-size: 18px;
  font-weight: bold;
  margin-left: 30px;
}
.div1 > div:nth-child(1) > p > span {
  margin-left: 10px;
}
.div1 > div:nth-child(1) > p > img:nth-child(3) {
  margin-left: 10px;
}
.div1 > div:nth-child(1) > ul {
  margin-left: 30px;
  margin-top: 59px;
}
.div1 > div:nth-child(1) > ul > li {
  float: left;
  width: 180px;
  height: 185px;
  text-align: center;
  position: relative;
  background: url("../../assets/img/shortVideoDetail/15.png");
  margin-left: 30px;
}
.div1 > div:nth-child(1) > ul > li > :nth-child(1) {
  margin-left: 0px;
}
.div1 > div:nth-child(1) > ul > li > img:nth-child(1) {
  margin-top: 30px;
}
.div1 > div:nth-child(1) > ul > li > p:nth-child(2) {
  font-size: 16px;
  margin-top: 20px;
}
.div1 > div:nth-child(1) > ul > li > div:nth-child(3) {
  width: 96px;
  height: 32px;
  text-align: center;
  line-height: 22px;
  background: url("../../assets/img/shortVideoDetail/11.png");
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: 96px;
  right: 0;
}
.div1 > div:nth-child(2) {
  float: right;
  width: 278px;
  height: 340px;
}
.bgBtn {
  width: 80px;
  height: 26px;
  background: url("../../assets/img/shortVideoDetail/17.png");
  color: #fff;
}
.right > p:nth-child(1) {
  margin-left: 20px;
}
.right > p:nth-child(1) > span {
  font-weight: bold;
  font-size: 18px;
  margin-left: 10px;
}
.right > p:nth-child(1) > button {
  margin-left: 10px;
}
.right ul {
  margin-top: 25px;
}
.right li {
  margin-left: 30px;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
}
.right li > span:nth-child(2) {
  font-size: 13px;
  color: rgb(34, 34, 34);
  margin-left: 5px;
}
.right li > span:nth-child(3) {
  font-size: 13px;
  color: rgb(34, 34, 34);
  float: right;
  margin-right: 35px;
}
.right li > span:nth-child(4) {
  font-size: 13px;
  color: rgb(34, 34, 34);
  float: right;
  margin-right: 5px;
}
.apprect {
  margin-left: 20px;
}
.apprect li {
  width: 240px;
  height: 50px;
  line-height: 50px;
  margin-left: 40px;
  float: left;
}
.apprect li span {
  font-size: 16px;
}
.apprecta {
  font-size: 18px;
  font-weight: bold;
  margin-left: 30px;
}
.apprecta>span{
  margin-left: 10px;
}
</style>


